<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drag</title>
    <script src="../js/jquery.min.js"></script>
</head>
<body>
<style>
    .dialog {
        position: absolute;
        left: 100px;
        top: 50px;
        width: 200px;

    }

    .title {
        background: #D7DEF0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        cursor: move;
    }

    .content {
        background: #F0F0F0;
        width: 100%;
        height: 200px;
    }
</style>
<div class="dialog" id="dialog">
    <div id="title" class="title">
        title
    </div>
    <div class="content">
    </div>
</div>
<script>
    var isMouseDown = false;
    var lastPoint={};
    $("#title").on("mousedown", function (e) {
        isMouseDown = true;
        lastPoint.x = e.pageX;
        lastPoint.y = e.pageY;
    }).on("mousemove", function (e) {
        if (isMouseDown) {
            var dialog = $("#dialog");
            var targetX = parseInt(dialog.css("left")) + e.pageX - lastPoint.x;
            var targetY = parseInt(dialog.css("top")) + e.pageY - lastPoint.y;
            dialog.css("left", targetX + "px");
            dialog.css("top", targetY + "px");
            lastPoint.x = e.pageX;
            lastPoint.y = e.pageY;
        }
    }).on("mouseup", function () {
        isMouseDown = false;
        lastPoint = {};
    });
</script>
</body>
</html>